{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import datetime %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,reportFormForRole %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    '@jquery_ui_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .provinces {
            margin-right: 8px;
        }

    </style>
{% endblock %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-body">
                <div class="widget-header">
                    <h5 class="widget-title">{{ 'Report Condition'|trans }}</h5>
                </div>
                <div class="widget-main no-padding">
                    <form action="javascript:loading_chart()" method="post" id="searchForm">
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;width:10%">
                                    <label for="time_stamp">{{ 'Statistical Cycle'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;width:10%">
                                    <select id="time_stamp" class="input-sm" onchange="setDatetimepicker(this.value)">
                                        <option value="0">{{ 'Stamp Date'|trans }}</option>
                                        <option value="1">{{ 'Stamp Month'|trans }}</option>
                                        <option value="2">{{ 'Stamp Custom'|trans }}</option>
                                    </select>
                                </td>
                                <td id="statistical_range" colspan="2" rowspan="4" class="col-xs-6" style="width:80%">
                                    <span>{{ 'Provinces'|trans }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span><input type="checkbox" id="isCheckAll" />{{ 'Select all'|trans }}</span>
                                    <div style="overflow:hidden;margin-top:10px;width:100%">
                                        <table class="forProvince">
                                            <tr>
                                                <td><span class="provinces"><input type="checkbox" value="北京市" class="province" name="province[]" />北京市</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="天津市" class="province" name="province[]" />天津市</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="上海市" class="province" name="province[]" />上海市</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="重庆市" class="province" name="province[]" />重庆市</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="安徽省" class="province" name="province[]" />安徽省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="澳门" class="province" name="province[]" />澳门</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="福建省" class="province" name="province[]" />福建省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="广东省" class="province" name="province[]" />广东省</span></td>
                                            </tr>
                                            <tr>
                                                <td><span class="provinces"><input type="checkbox" value="甘肃省" class="province" name="province[]" />甘肃省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="贵州省" class="province" name="province[]" />贵州省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="河北省" class="province" name="province[]" />河北省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="河南省" class="province" name="province[]" />河南省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="湖北省" class="province" name="province[]" />湖北省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="湖南省" class="province" name="province[]" />湖南省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="海南省" class="province" name="province[]" />海南省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="浙江省" class="province" name="province[]" />浙江省</span></td>
                                            </tr>
                                            <tr>
                                                <td><span class="provinces"><input type="checkbox" value="江西省" class="province" name="province[]" />江西省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="吉林省" class="province" name="province[]" />吉林省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="辽宁省" class="province" name="province[]" />辽宁省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="内蒙古" class="province" name="province[]" />内蒙古</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="宁夏" class="province" name="province[]" />宁夏</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="青海省" class="province" name="province[]" />青海省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="山东省" class="province" name="province[]" />山东省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="山西省" class="province" name="province[]" />山西省</span></td>
                                            </tr>
                                            <tr>
                                                <td><span class="provinces"><input type="checkbox" value="台湾省" class="province" name="province[]" />台湾省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="新疆" class="province" name="province[]" />新疆</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="西藏" class="province" name="province[]" />西藏</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="香港" class="province" name="province[]" />香港</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="陕西省" class="province" name="province[]" />陕西省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="云南省" class="province" name="province[]" />云南省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="江苏省" class="province" name="province[]" />江苏省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="四川省" class="province" name="province[]" />四川省</span></td>

                                            </tr>
                                            <tr>
                                                <td><span class="provinces"><input type="checkbox" value="广西省" class="province" name="province[]" />广西省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="黑龙江省" class="province" name="province[]" />黑龙江省</span></td>
                                                <td><span class="provinces"><input type="checkbox" value="其它" class="province" name="province[]" />其它</span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="start_date">{{ 'Date'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    {{ datetime('start_date',date.startDate) }}
                                    {{ datetime('end_date',date.endDate) }}
                                </td>
                            </tr>
                            <tr id="statistical_type">
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="statistical_type">{{ 'Statistical Type'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <label>
                                        <input type="radio" class="ace" id="type_queue" name="type" checked value="queue">
                                        <span class="lbl"> {{ 'By Queue'|trans }}</span>
                                    </label>
                                    <label>
                                        <input type="radio" class="ace" id="type_number" name="type" value="number">
                                        <span class="lbl"> {{ 'By Number'|trans }}</span>
                                    </label>
                                    {% if isEnableGroup == 1 %}
                                    <label>
                                        <input type="radio" class="ace" id="type_group" name="type" value="group">
                                        <span class="lbl"> {{ 'By Group'|trans }}</span>
                                    </label>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <span id="choseText"></span>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                <select id="forStatisticalChosen" data-placeholder="请选择" class="chosen-select" multiple style="width:35%"></select>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-center">
                                    <button id="loading-btn" type="submit" class="btn btn-info btn-sm">
                                        <i class="ace-icon fa fa-search"></i> {{ 'Inquiry'|trans }}
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div style="margin-bottom: 50px;">
            <table id="grid-table"></table>
        </div>
        <!-- /section:custom/widget-box -->
        <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
        <div id="child" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    </div>
{% endblock %}

{% block footer %}
    {{ parent() }}
    {% javascripts
    'bundles/icsocivr/js/jquery.ztree.all-3.5.min.js'
    'bundles/icsocreport/js/echarts-all.js'
    '@datepicker_js'
    '@jqgird_js'
    '@chosen_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        jQuery(function($) {
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                caption: "{{ caption|trans({'%start_date%': date.startDate, '%end_date%': date.endDate}) }}",
                url: "{{ path('icsoc_report_charts_inarea_getDataForInareaList') }}",
                hidegrid:false,
                postData: {data:jsonToString(getCondition())},
                mtype: 'POST',
                datatype: "json",
                colModel:[
                    {name: 'province_name', index: 'province_name', label: '{{ 'Provinces'|trans }}', width: 80, sortable: false, align: 'center'},
                    {name: 'total', index: 'total', label: '{{ 'Total nums'|trans }}', width: 80, sortable: false, align: 'center'},
                    {name: 'mobile_nums', index: 'mobile_nums', label: '{{ 'Mobile nums'|trans }}', width: 80, sortable: false, align: 'center'},
                    {name: 'tel_nums', index: 'tel_nums', label: '{{ 'Tel nums'|trans }}', width: 80, sortable: false, align: 'center'},
                ],
                {{ gridConfig(true) }}
                rownumWidth: 30,
                fit:true,
                viewrecords: true, //定义是否要显示总记录数
                rowNum: -1,  //默认每页显示多少条数据
                multiselect: false,
                rownumbers: true,
                footerrow:true,
                userDataOnFooter:true,
                records:true,
                subGrid : true,
                subGridOptions : {
                    plusicon : "ace-icon fa fa-plus center bigger-110 blue",
                    minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
                    openicon : "ace-icon fa fa-chevron-right center orange"
                },
                subGridRowExpanded: function (subgridDivId, rowId) {
                    var province_name = jQuery(grid_selector).getCell(rowId,'province_name');
                    var subgridTableId = subgridDivId + "_t";
                    $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                    $("#" + subgridTableId).jqGrid({
                        datatype: 'json',
                        url: "{{ path('icsoc_report_charts_inarea_getCityDatasForList') }}",
                        postData : {data:jsonToString(getCondition()),provincName:province_name },
                        colModel: [
                            {name: 'city', index: 'city', label: '{{ 'City'|trans }}', width: 300, sortable: false, align: 'center'},
                            {name: 'total', index: 'total', label: '{{ 'Total nums'|trans }}', width: 300, sortable: false, align: 'center'},
                            {name: 'mobile_nums', index: 'mobile_nums', label: '{{ 'Mobile nums'|trans }}', width: 300, sortable: false, align: 'center'},
                            {name: 'tel_nums', index: 'tel_nums', label: '{{ 'Tel nums'|trans }}', width: 300, sortable: false, align: 'center'},
                        ]
                    });
                },
            });
            {{ gridNav(false,false,false,false,true,false) }}
        });

        var myChart = echarts.init(document.getElementById('main'));
        var childChart = echarts.init(document.getElementById('child'));
        $(document).ready(function() {
            //全选
            $('#isCheckAll').click(function() {
                var isChecked = $(this).prop('checked');
                $('.province').prop('checked', isChecked);
            });
            //去掉数据列表的滚动条
            //$('.ui-jqgrid-bdiv').css('overflow-x','hidden');

            $('.province').click(function(){
                if (!$(this).prop('checked')) {
                    $(this).prop('checked', false);
                } else {
                    $(this).prop('checked', true);
                }
            });

            /**
             * 设置统计周期
             */
            var time_stamp = $('#time_stamp').val();
            $('#start_date').datetimepicker();
            setDatetimepicker(time_stamp);

            var statistical_type = $("input[name='type']:checked").val();
            if (statistical_type == 'number') {
                $('#choseText').html("{{ 'Number'|trans }}");
            } else if (statistical_type == 'group'){
                $('#choseText').html("{{ 'Group'|trans }}");
            } else {
                $('#choseText').html("{{ 'Queue'|trans }}");
            }
            $('.chosen-select').chosen();
            getDataForChosenSelect(statistical_type);
            /**
             * 加载统计范围
             */
            $("input[name='type']").click(function () {
                var statistical_type = $("input[name='type']:checked").val();
                if (statistical_type == 'number') {
                    $('#choseText').html("{{ 'Number'|trans }}");
                } else if (statistical_type == 'group'){
                    $('#choseText').html("{{ 'Group'|trans }}");
                } else {
                    $('#choseText').html("{{ 'Queue'|trans }}");
                }
                $('.chosen-select').chosen();
                getDataForChosenSelect(statistical_type);
            });

            myChart.setOption({"series":[{"name":"","type":"bar"}]});
            childChart.setOption({"series":[{"name":"","type":"bar"}]});
            myChart.showLoading({
                'text':'读取中...',
                'effect':'bubble'
            });
            loading_chart();
        });

        /**
         *获取搜索条件
         */
        function getCondition()
        {
            var data = {};
            var statistical_type = $("input[name='type']:checked").val();
            if (statistical_type == 'undefined') {
                alert('请选择统计类型');
                return;
            }

            data.chartType = statistical_type;
            var chosenVal = $('#forStatisticalChosen').val();
            data.chosenVal = chosenVal;
            data.time_stamp = $('#time_stamp').val();
            data.start_date = $.trim($('#start_date').val());
            data.end_date = $.trim($('#end_date').val());

            var chosenProvinces = [];
            $('input[type="checkbox"][name="province[]"]').each(function() {
                if ($(this).prop('checked')) {
                    chosenProvinces.push($(this).val());
                }
            });
            data.chosenProvinces = chosenProvinces;

            return data;
        }

        /**
         * 加载图表
         */
        function loading_chart(magicType)
        {
            if (!$('#start_date').val()) {
                $('#start_date').parent().parent().addClass('has-error');
                $('#start_date').focus();
                return;
            }

            var statistical_type = $("input[name='type']:checked").val();
            if (statistical_type == 'undefined') {
                alert('请选择统计类型');
                return;
            }

            setSearchDate();
            //搜索时重新加载数据列表
            $('#grid-table').setGridParam({postData:{data:jsonToString(getCondition())}}).trigger("reloadGrid");

            var data = getCondition();
            data.magicType = magicType;
            $.ajax({
                url:'{{ path(action) }}',
                data:data,
                type:'POST',
                dataType:'json',
                success:function(responce){
                    myChart.dispose();
                    myChart = echarts.init(document.getElementById('main'));
                    if (responce.code == 200) {
                        if ("undefined" != typeof responce.data.toolbox.feature.myTool && responce.data.toolbox.feature.myTool.show == 1) {
                            //responce.data.toolbox.feature.myTool.icon = "{{ asset('bundles/icsocivr/images/2.gif') }}";
                            responce.data.toolbox.feature.myTool.onclick = function (){
                                loading_chart( responce.data.toolbox.feature.myTool.magicType);
                            };
                        }
                        $('#child').hide();
                        myChart.setOption(responce.data);
                        myChart.on('click',function(params){
                            $.ajax({
                                url: "{{ path('icsoc_report_charts_inarea_getCityDatas') }}",
                                type: 'post',
                                data: { name:params.name,condition:jsonToString(getCondition()),magicType:magicType },
                                success: function(e){
                                    $('#child').show();
                                    childChart.dispose();
                                    childChart = echarts.init(document.getElementById('child'));
                                    if ("undefined" != typeof e.data.toolbox.feature.myTool && e.data.toolbox.feature.myTool.show == 1) {
                                        e.data.toolbox.feature.myTool.onclick = function (){
                                            loading_chart( e.data.toolbox.feature.myTool.magicType);
                                        };
                                    }
                                    childChart.setOption(e.data);
                                }
                            });
                        });
                    } else {
                        myChart.setOption({"series":[{"name":"","type":"pie"}]});
                    }
                }
            });
        }

        /**
         * 日期设置
         */
        function setDatetimepicker(type)
        {
            $('#start_date').data("DateTimePicker").destroy();

            switch (type) {
                case '0':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.startDate }}');
                    $('#end_date').hide();
                    break;
                case '1':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM',
                        locale: 'zh-cn'
                    }).val('{{ date.startMonth }}');
                    $('#end_date').hide();
                    break;
                case '2':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.startDate }}');
                    $('#end_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.endDate }}').show();
                    break;
            }
        }

        /**
         * 获取下拉框的具体数值
         */
        function getDataForChosenSelect(param)
        {
            $.ajax({
                url: "{{ path('icsoc_report_charts_getDataForChosenSelect') }}",
                type: 'post',
                data: {chosenType:param},
                success: function (response) {
                    $('#forStatisticalChosen').html('');
                    $('#forStatisticalChosen').append(response);
                    $("#forStatisticalChosen").trigger("chosen:updated");
                }
            });
        }

        /**
         * 根据搜索条件设置数据列表的时间
         */
        function setSearchDate()
        {
            var startDate = $('#start_date').val();
            var time_stamp = $('#time_stamp').val();
            if (time_stamp == 0) {
                $('#grid-table').jqGrid('setCaption', '呼入地区分析图表 【'+startDate+' ~ '+startDate+'】');
            } else if (time_stamp == 1) {
                var year = startDate.substring(0,4);
                var month = startDate.substring(6);
                var day = new Date(year,month,0);
                var lastDate = year + '-' + month + '-' + day.getDate();
                $('#grid-table').jqGrid('setCaption', '呼入地区分析图表 【'+startDate+'-01 ~ '+lastDate+'】');
            } else {
                var endDate = $('#end_date').val();
                $('#grid-table').jqGrid('setCaption', '呼入地区分析图表 【'+startDate+' ~ '+endDate+'】');
            }
        }
    </script>
{% endblock %}